{% extends 'base/base.html' %}

{% block title %}项目Webhooks - {{ project.name }} - 多用户报警系统{% endblock %}

{% block content %}
<div class="mb-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>
            <i class="fa fa-plug" aria-hidden="true"></i> 项目Webhooks - {{ project.name }}
        </h1>
        {% if user_role == 'admin' %}
            <a href="{% url 'projects:project_add_webhook' project.id %}" class="btn btn-primary">
                <i class="fa fa-plus" aria-hidden="true"></i> 添加Webhook
            </a>
        {% endif %}
    </div>
    
    {% if webhooks %}
        <div class="table-responsive">
            <table id="project-webhooks-table" class="project-webhooks-table table">
                <thead class="thead-dark">
                    <tr>
                        <th style="text-align: left;">名称</th>
                        <th style="text-align: left;">完整Webhook URL</th>
                        <th style="text-align: left;">渠道</th>
                        <th style="text-align: left;">触发事件</th>
                        <th style="text-align: left;">状态</th>
                        <th style="text-align: left;">创建时间</th>
                        <th style="text-align: left;">最后触发</th>
                        <th style="text-align: left;">操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for webhook in webhooks %}
                        <tr>
                            <td style="text-align: left;">
                                <strong>{{ webhook.name }}</strong>
                                {% if webhook.description %}
                                    <br><small class="text-muted">{{ webhook.description|truncatechars:50 }}</small>
                                {% endif %}
                            </td>
                            <td style="text-align: left;">
                                <div class="webhook-url-container">
                                    <div class="webhook-url-full" title="{{ webhook.url }}">
                                        <code>{{ webhook.url }}</code>
                                    </div>
                                    <div class="webhook-url-actions mt-1">
                                        <button class="btn btn-sm btn-outline-secondary copy-btn" 
                                                data-url="{{ webhook.url }}" 
                                                title="复制URL">
                                            <i class="fa fa-copy"></i> 复制
                                        </button>
                                        <a href="{{ webhook.url }}" 
                                           class="btn btn-sm btn-outline-primary" 
                                           target="_blank" 
                                           title="测试URL">
                                            <i class="fa fa-external-link"></i> 测试
                                        </a>
                                    </div>
                                </div>
                            </td>
                            <td style="text-align: left;">
                                <span class="webhook-channel {{ webhook.channel }}">
                                    {% for choice in CHANNEL_CHOICES %}
                                        {% if choice.0 == webhook.channel %}
                                            {{ choice.1 }}
                                        {% endif %}
                                    {% endfor %}
                                </span>
                            </td>
                            <td style="text-align: left;">
                                <div class="webhook-events">
                                    {% for event in webhook.events %}
                                        <span class="webhook-event {{ event }}">
                                            {% for choice in EVENT_CHOICES %}
                                                {% if choice.0 == event %}
                                                    {{ choice.1 }}
                                                {% endif %}
                                            {% endfor %}
                                        </span>
                                    {% endfor %}
                                </div>
                            </td>
                            <td style="text-align: left;">
                                {% if webhook.is_active %}
                                    <span class="webhook-status active">已激活</span>
                                {% else %}
                                    <span class="webhook-status inactive">已禁用</span>
                                {% endif %}
                            </td>
                            <td style="text-align: left;"><span class="webhook-datetime">{{ webhook.created_at|date:"Y年m月d日 H:i:s" }}</span></td>
                            <td style="text-align: left;">
                                {% if webhook.last_triggered_at %}
                                    <span class="webhook-datetime">{{ webhook.last_triggered_at|date:"Y年m月d日 H:i:s" }}</span>
                                {% else %}
                                    <span class="never-triggered">从未触发</span>
                                {% endif %}
                            </td>
                            <td class="webhook-actions" style="text-align: left;">
                                <div class="btn-group" role="group">
                                    {% if user_role == 'admin' %}
                                        <a href="{% url 'projects:project_edit_webhook' project.id webhook.id %}" class="btn btn-secondary btn-sm" title="编辑Webhook">
                                            <i class="fa fa-pencil" aria-hidden="true"></i>
                                        </a>
                                        <a href="{% url 'projects:project_delete_webhook' project.id webhook.id %}" class="btn btn-danger btn-sm" title="删除Webhook" onclick="return confirm('确定要删除该Webhook吗？这将停止所有相关的通知。');">
                                            <i class="fa fa-trash" aria-hidden="true"></i>
                                        </a>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        <!-- 分页 -->
        {% if is_paginated %}
            <nav aria-label="Page navigation" class="mt-4">
                <ul class="pagination">
                    {% if page_obj.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                    {% else %}
                        <li class="page-item disabled">
                            <a class="page-link" href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                    {% endif %}
                    
                    {% for num in page_obj.paginator.page_range %}
                        {% if page_obj.number == num %}
                            <li class="page-item active"><a class="page-link" href="#">{{ num }}</a></li>
                        {% else %}
                            <li class="page-item"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
                        {% endif %}
                    {% endfor %}
                    
                    {% if page_obj.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    {% else %}
                        <li class="page-item disabled">
                            <a class="page-link" href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    {% endif %}
                </ul>
            </nav>
        {% endif %}
    {% else %}
        <div class="card">
            <div class="card-body py-8">
                <i class="fa fa-plug" aria-hidden="true" style="font-size: 4rem; color: #d9d9d9;"></i>
                <h3 class="mt-4 text-muted">暂无项目Webhooks</h3>
                <p class="text-muted mb-6">Webhook可以在项目发生变化时向指定URL发送通知</p>
                {% if user_role == 'admin' %}
                    <a href="{% url 'projects:project_add_webhook' project.id %}" class="btn btn-primary">
                        <i class="fa fa-plus" aria-hidden="true"></i> 添加第一个Webhook
                    </a>
                {% endif %}
            </div>
        </div>
    {% endif %}
</div>

<!-- Webhook URL展示区域 -->
<div class="card mt-4">
    <div class="card-header">
        <h5 class="mb-0">
            <i class="fa fa-link" aria-hidden="true"></i> Webhook URL格式说明
        </h5>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <h6>标准格式（推荐）：</h6>
                <code>http://{{ request.get_host }}/webhooks/&lt;项目ID&gt;/&lt;Webhook ID&gt;/receive/</code>
                <br><small class="text-muted">使用项目ID，适用于所有场景</small>
            </div>
            <div class="col-md-6">
                <h6>替代格式：</h6>
                <code>http://{{ request.get_host }}/webhooks/&lt;项目Slug&gt;/&lt;Webhook ID&gt;/receive/</code>
                <br><small class="text-muted">使用项目Slug，更易于记忆</small>
            </div>
        </div>
        <hr>
        <div class="alert alert-info">
            <strong>💡 提示：</strong>
            <ul class="mb-0">
                <li>项目ID：当前项目的数字标识符</li>
                <li>Webhook ID：每个Webhook的唯一UUID标识符</li>
                <li>项目Slug：项目的URL友好名称</li>
                <li>URL末尾必须包含 <code>/receive/</code> 才能正确接收webhook</li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}

{% block javascript %}
<script>
// 添加页面加载动画效果
document.addEventListener('DOMContentLoaded', function() {
    // 添加表格行悬停效果
    const tableRows = document.querySelectorAll('table tbody tr');
    tableRows.forEach(row => {
        row.style.transition = 'background-color 0.2s ease';
        row.addEventListener('mouseenter', function() {
            this.style.backgroundColor = '#f8f9fa';
        });
        row.addEventListener('mouseleave', function() {
            this.style.backgroundColor = '';
        });
    });

    // 复制URL功能
    const copyButtons = document.querySelectorAll('.copy-btn');
    copyButtons.forEach(button => {
        button.addEventListener('click', function() {
            const url = this.getAttribute('data-url');
            navigator.clipboard.writeText(url).then(() => {
                // 显示复制成功提示
                const originalText = this.innerHTML;
                this.innerHTML = '<i class="fa fa-check"></i> 已复制';
                this.classList.remove('btn-outline-secondary');
                this.classList.add('btn-success');
                
                setTimeout(() => {
                    this.innerHTML = originalText;
                    this.classList.remove('btn-success');
                    this.classList.add('btn-outline-secondary');
                }, 2000);
            }).catch(err => {
                console.error('复制失败:', err);
                alert('复制失败，请手动选择并复制URL');
            });
        });
    });
});
</script>

<style>
.webhook-url-container {
    max-width: none;
    width: 100%;
    min-width: 100%;
}
    
.webhook-url-full {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 8px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    word-break: break-word;
    margin-bottom: 5px;
    white-space: pre-wrap;
    overflow: visible;
    max-width: none;
    width: 100%;
}

/* 确保表格列可以适应长URL */
.project-webhooks-table th:nth-child(2),
.project-webhooks-table td:nth-child(2) {
    white-space: normal;
    max-width: none;
    width: 100%;
    min-width: 600px;
    word-break: break-word;
}
    
/* 表格整体宽度调整 */
.table-responsive {
    overflow-x: auto;
    width: 100%;
}
    
.project-webhooks-table {
    width: 100%;
    table-layout: auto;
}

.webhook-url-actions {
    display: flex;
    gap: 5px;
}

.webhook-url-actions .btn {
    padding: 2px 6px;
    font-size: 11px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .webhook-url-container {
        max-width: 100%;
    }
}
</style>
{% endblock %}